<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body class="dpflex flexD">
    <div class="banner">
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="./img/index-swiper-bg1.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./img/index-swiper-bg2.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./img/index-swiper-bg3.jpg" alt="">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <main class="flexl main1">
        <div class="dpflex mt16">
            <div class="ranking">
                <img src="./img/index-card-rank.png" alt="">
                <div class="pan">今日排名:</div> <span class="span1"></span>
            </div>
            <div class="clock-count mt12">
                <img src="./img/index-card-sum.png" alt="">
                <div class="pan1">累计打卡<span></span>天</div>

                <div class="clock-btn">
                    今日打卡
                </div>
            </div>
        </div>
        <div class="dpflex">
            <div class="data flex1 mt16">
                <img src="./img/index-card-data.png" alt="">
                <div class="title1">运动数据</div>
            </div>
            <div class="badges ml12 flex1 mt16">
                <img src="./img/index-card-badge.png" alt="">
                <div class="item1">累计运动徽章:</div> 
                <div class="item3"><span class="item2"></span>枚</div>

            </div>
        </div>
        <div class="item mt16"></div>
        <div class="item mt16"></div>

    </main>
    <!-- <footer class="dpflex">
        <div class="footer-item">
            <i></i>
            <p>首页</p>
        </div>
        <div class="footer-item">
            <i></i>
            <p>运动</p>
        </div>
        <div class="footer-item">
            <i></i>
            <p>我的</p>
        </div>

    </footer> -->
</body>

</html>